<template>
	<view style="background-color: #fff !important;">
	  <tn-nav-bar backTitle="">我的设备
			<template slot="right">
				<text class="tn-icon-add-circle" style="font-size: 40rpx;margin-right: 30rpx;" @click="goAddDevice"></text>
					</template>
		</tn-nav-bar>
  <!-- 页面内容 -->
  <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
  </view>
	<view class="device-list-container">
    <view class="device-list-grid">
      <view class="device-card" v-for="(item, idx) in deviceList" :key="idx">
        <!-- <image class="device-card-setting" src="/static/image/icon/setting.png" /> -->
				<text @click="goDeviceSetting" class="tn-icon-set" style="position: absolute;
				top: 28rpx;right: 32rpx;font-size: 40rpx;"></text>
        <image class="device-card-img" src="/static/image/shebeili.png" />
        <view class="device-card-bottom">
          <text class="device-card-name">MOMI</text>
          <view class="device-card-switch" :class="{on: item.on}">
            <view class="device-card-switch-dot"></view>
          </view>
        </view>
      </view>
    </view>
	</view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceList: Array(8).fill({on: true})
    }
	},
	methods: {
		goAddDevice() { 
			uni.navigateTo({
				url: '/pages/device/wifi/index'
			})
		},
		goDeviceSetting() {
			uni.navigateTo({
				url: '/pages/index/dervceSetting'
			})
		}
	}
}
</script>

<style scoped>
.device-list-container {
  min-height: 100vh;
  background: #fff;
  padding: 32rpx 0;
}
.device-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32rpx 24rpx;
  padding: 0 24rpx;
}
.device-card {
  background: #fbfbfb;
  border-radius: 40rpx;
  padding: 32rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 340rpx;
}
.device-card-setting {
  position: absolute;
  top: 28rpx;
  right: 32rpx;
  width: 36rpx;
  height: 36rpx;
}
.device-card-img {
	margin-top: 50rpx;
  width: 250rpx;
  height: 220rpx;
  margin-bottom: 54rpx;
}
.device-card-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx 24rpx 32rpx;
}
.device-card-name {
  font-size: 32rpx;
  color: #111;
  font-family: 'Arial', sans-serif;
}
.device-card-switch {
  width: 64rpx;
  height: 36rpx;
  background: #eee;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4rpx;
  transition: background 0.3s;
}
.device-card-switch.on {
  background: #000;
}
.device-card-switch-dot {
  width: 28rpx;
  height: 28rpx;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}
</style>
